<!doctype html>

<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-132775238-1');
  </script>
  <script data-ad-client="ca-pub-3841792756480152" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  <meta name="description" content="RapiDoc is Web Component for viewing Swagger & OpenAPI Spec. Supports themes, styling and various rendering styles">
  <meta name="keywords" content="RapiDoc, openapi viewer, openapi to html, openapi renderer, ReDoc, Swagger, SwaggerUI, Custom Element, Web Component, OpenAPI, REST, themes, dark mode, markdown, API documentation, API mock">
  
  <link rel="shortcut icon" type="image/png" href="./images/logo.png"/>

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400&display=swap" rel="stylesheet">


  <!-- Code Highlight -->
  <link rel="stylesheet" href="./highlight/styles/zenburn.css">
  <script src="./highlight/highlight.pack.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>


  <!-- Before/After Slider -->
  <link rel="stylesheet" href="./slider/BeerSlider.css">
  <script src="./slider/BeerSlider.js"></script>

  <link rel="stylesheet" href="index.css">
  <link rel="stylesheet" href="sections.css">
  <style>

  .beer-range:focus~.beer-handle,
  .beer-handle { 
    background: cornflowerblue 
  };
  
  #main-img { width: 350px; }
  #main-img { width: 350px; } /* Duplicate is needed- not sure why else it is not taking the effect while testing in responsive mode */
  #slider { width: 350px; }
  #schema-table-img { height:290px; margin:10px 0; }
  #schema-tree-img  { height:290px; width:340px;}
  
  @media only screen and (min-width: 760px) {
    #main-img { width: 750px; }
    #slider { width: 750px; }
    #schema-table-img { height:300px; margin: 0 5px 0 0 }
    #schema-tree-img  { height:300px; width:auto;}
  }

  @media only screen and (min-width: 1000px) {
    #main-img { width: 800px; }
    #slider { width: 800px; }
    #schema-table-img { height:340px; margin: 0 5px 0 0 }
    #schema-tree-img  { height:340px; width:auto;}
  }


  </style>

  <title>RapiDoc - Web Component based Swagger & OpenAPI Spec Viewer</title>
</head>

<body>
  <div style="background-color: white; font-family: exo;font-weight: lighter; font-size:large; display:flex; flex-direction: row; align-items: center;justify-content: space-between">
    <div style="padding:15px 20px 15px 20px; ">
      Get a Stripe like API experience for your customers in minutes - documentation, rate-limiting and API-key auth with <a style="font-weight:bold; color:#FF00BD" href="https://zuplo.link/rapidoc-1">zuplo</a>
    </div>
    <div style="padding:2px 20px 2px 20px; ">
      <a class="zuplo-button" href="https://zuplo.link/rapidoc-1">Start free</a>
    </div>
  </div>

  <!--Banner Starts-->
  <div class="banner">
    <div class='topbar' style="height:500px">
      <div class="header">
        <img class="logo" src="./images/logo.png" style="width:36px;height:36px;margin-right:10px;" />  
        <div class="product-name">RapiDoc</div>
        <div class="menu" style="flex:1"></div>
        <nav class="menu" onclick="goToSection(event)">
          <a class="menu-item hide-in-mobile" href="#features"> Features </a>
          <a class="menu-item" data-action="url" href="./quickstart.html"> Quick Start </a>
          <a class="menu-item" data-action="url" href="./examples.html"> Examples </a>
          <a class="menu-item" data-action="url" href="./api.html"> API </a>
          <a class="menu-item hide-in-mobile" data-action="url" href="https://mrin9.github.io/RapiPdf/"> RapiPDF </a>
          <a class="menu-item" data-action="url" href="https://github.com/rapi-doc/RapiDoc"> GitHub </a>
        </nav>
      </div>
    </div>

    <!-- Banner Image (absolute positioned)-->
    <div style="position:absolute; top:64px; width:100vw; z-index:10">
      <div>
        <div class="banner-content">
          <h1 class="banner-title">OpenAPI Spec Documentations</h1>
          <div class="banner-content-inner">
            <p style="font-size:20px; color:#caecff;">Create beautiful, customizable, interactive API documentation from OpenAPI Specification</p>
          </div>
        </div>
      </div>
      <div style="display:flex; justify-content: center;">
        <img id='main-img' class="shadow3" src="./images/dark_ss.png" />
      </div>
    </div>
    <!-- End of Banner Image -->

    <!--Waves Container-->
    <div>
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.6" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.4)" />
          <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
        </g>
      </svg>
    </div>
    <!--Waves end-->
  </div>
  <!--Header ends-->

  <div class="features" id="features" >
    <div class="feature">
      <object type="image/svg+xml" data="./images/webcomponent.svg" style="width:64px; height:64px;"> </object>
      <div class="feature-info">
        <div class="feature-title"> Web Component Standard</div>
        <div class="feature-descr"> 
          Free of any frameworks, setups, configs, build steps or packaging.
          Can be used with any framework or just with vanilla javascript
        </div>
      </div>
    </div>

    <div class="feature">
      <object type="image/svg+xml" data="./images/easy.svg" style="width:64px; height:64px;"> </object>
      <div class="feature-info">
        <div class="feature-title"> Easy Usage</div>
        <div class="feature-descr"> 
          Use It just like any other HTML Tag, Change its attribute using JavaScript and see
          it react to those changes. Basic knowledge of HTML is all that's required 
        </div>
      </div>
    </div>

    <div class="feature">
      <object type="image/svg+xml" data="./images/mask.svg" style="width:64px; height:64px;"> </object>
      <div class="feature-info">
        <div class="feature-title"> Fully Customizable</div>
        <div class="feature-descr"> 
          Style it to your heart's content. Change font, logo, colors and theme. 
          Inject external HTML or embed into another HTML document.
        </div>
      </div>
    </div>
    <div class="feature">
      <object type="image/svg+xml" data="./images/fast.svg" style="width:64px; height:64px;"> </object>
      <div class="feature-info">
        <div class="feature-title"> Small And Fast</div>
        <div class="feature-descr"> 
          Minimal dependencies, no runtime and no virtual DOM ensures lowest memory consumption, 
          Just native and raw speed of modern browser.
        </div>
      </div>
    </div>

    <div class="feature">
      <object type="image/svg+xml" data="./images/gears.svg" style="width:64px; height:64px;"> </object>
      <div class="feature-info">
        <div class="feature-title"> Seamlessly interoperable</div>
        <div class="feature-descr"> 
          Loved by tech writers, designers, dev-ops, testers and developers alike, 
          due to its simplicity, interoperability and powerful features.
          No special build-steps, runtime or framework required
        </div>
      </div>
    </div>

    <div class="feature">
      <object type="image/svg+xml" data="./images/console.svg" style="width:64px; height:64px;"> </object>
      <div class="feature-info">
        <div class="feature-title"> Integrated Console</div>
        <div class="feature-descr"> 
          Comes with built in console to Try out the APIs. Supports authentication mechanism. 
          No validation ensures, you can test negative cases.
        </div>
      </div>
    </div>

    <div class="feature">
      <object type="image/svg+xml" data="./images/mouse.svg" style="width:64px; height:64px;"> </object>
      <div class="feature-info">
        <div class="feature-title"> Better Usability</div>
        <div class="feature-descr"> 
            Browse the spec with minimal clicks. All models & examples are expanded by default, eliminates the need to click and reveal.
            Requests and Responses are pre-populated with sample data.
        </div>
      </div>
    </div>
  </div>
  
  <div class="section" style="flex-direction: column;align-items: center;">
    <h2 style="text-align: center;"> Create your own themes with simplicity </h2>

    <div style="display:flex;justify-content: space-around;">
      <div id="slider" class="beer-slider shadow3" data-beer-label="">
        <img src="./images/dark_ss.png" alt="">
        <div class="beer-reveal" data-beer-label="">
          <img src="./images/light_ss.png" alt="">
        </div>
      </div>
    </div>
    <div style='margin-top:32px; font-size:20px'>
        <a href="./examples/themes.html"> Click for demo showing various color schemes </a> 
    </div>
    
  </div>
  <div class="section">
      <div class="section-left section-text" style="filter: brightness(0.9) sepia(1) hue-rotate(-5deg) saturate(2);">
        <h2> Match Your Brand</h2>
        <div> Put your own Logo, Change Header Color, Fonts, Button and Text Colors to match your Brand, 
          in an extremely easy way without writing any css/js/html. 
          You can also control them using JavaScript to dynamically change 
        </div>
      </div>
      <img class="section-right section-img shadow3" src="./images/rapi-brand.png" />
  </div>
  
  <div class="section" style="background-color: #88ACE0;">
    <img class="section-left section-img shadow3" src="./images/rapi-mode-read.png" />
    <div class="section-right section-text">
      <h2> Multiple Rendering Styles</h2>
      <div> While the default rendering style (view mode) is loved by programmers for quick exploration, 
        RapiDoc also gives you an option to present API documentation to external audience which is more suitable to read like an Wiki
      </div>
    </div>
  </div>
  
  <div class="section" style="background-color: lavender;">
    <div class="section-left section-text">
      <h2> Supports Markdown</h2>
      <div> Comes with a builtin markdown rendering engine, 
        Enhance your API documentation even more by including markdown syntax. 
        Add tables, lists, code-snippets, and many other formatting options.
      </div>
    </div>
    <img class="section-right section-img shadow3" src="./images/rapi-markdown.png" />
  </div>

  <div class="section" style='flex-wrap: wrap;'>
    <img id='schema-table-img' class="shadow3" src="./images/rapi-schema-table.png" />
    <img id='schema-tree-img'class="shadow3" src="./images/rapi-schema-tree.png" />
    <div class="section-right section-text">
      <h2> Two beautiful ways to show object models</h2>
      <div>
        RapiDocs ability to show object models is loved by many. 
        Allows two distinctive styles, tabular and tree, both are suited for 
        large and small schemas representation that allows object/array folding.
      </div>
    </div>
  </div>
    
  <div id="qstart" class="section" style="flex-direction: column;">
  <h2> Quickstart (<a style="font-size:16px" href="./examples/example2.html">DEMO</a>)</h2> 
  Just copy the below code and save it in an html file. Then open it using a browser 
<pre class="shadow code-block"><code class="html" style="border-radius:4px">&lt;!doctype html&gt; &lt;!-- Important: must specify --&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt; &lt;!-- Important: rapi-doc uses utf8 characters --&gt;
  &lt;script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;rapi-doc 
    spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json" 
  &gt; &lt;/rapi-doc&gt;
&lt;/body&gt; 
&lt;/html&gt;
</code></pre>
  </div>

<div id="footer" class="footer">
  <div class="footer-item"> MIT Licence</div>
  <div class="footer-item"> <a href="https://github.com/rapi-doc/RapiDoc"> GitHub</a></div>
  <div class="footer-item"> <a href="https://mrin9.github.io/RapiPdf/"> RapiPDF</a></div>
  <div class="footer-item hide-in-mobile"> <a href="https://www.npmjs.com/package/rapidoc"> npm</a></div>
</div>

  <script>
    
  window.addEventListener('DOMContentLoaded', (event) => {
    let slider = new BeerSlider(document.getElementById('slider'));
  });


  function goToSection(e){
    if (e.target.dataset.action==='url'){
      return;
    }

    e.preventDefault();
    var gotoEl = document.getElementById(e.target.getAttribute('href').substring(1));
    if (gotoEl){
      gotoEl.scrollIntoView({ block: 'start',  behavior: 'smooth' });
    }
  }
  </script>
</body>

</html>
